<template>
  <div>
    <v-title :title="title">
      <el-select size="mini" v-model="date" @change="change" class="chart-change">
        <el-option :value="90" label="近90天"></el-option>
        <el-option :value="30" label="近30天"></el-option>
        <el-option :value="7" label="近7天"></el-option>
      </el-select>
    </v-title>
    <ve-line
            height="85%"
            :data="data"
            :colors="['#4E93FF','#F55205','#5CB87A']"
            :settings="chartSettings"
            :extend="chartExtend">
    </ve-line>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from '../home-title/index.vue'

  @Component({
    components: {
      vTitle
    }
  })
  export default class Charts extends Vue {
    @Prop() title
    @Prop() value
    @Prop() chartData
    date = this.value
    data = {}
    chartSettings = {}
    chartExtend = {}

    change (a) {
      this.$emit('input', a)
      this.$emit('refresh')
    }

    init (data, setting,chartExtend) {
      this.data = data
      this.chartSettings = setting
      this.chartExtend = chartExtend
    }

  }
</script>

<style lang="less" scoped>
  /*.chart-change{*/
    /*flex-direction: row;*/
  /*}*/
</style>
